<template>
	<view v-if="popList.length > 0 && showPop" class="pop">
		<u-overlay :show="show" class="centent">
			<swiper @change="change" @click="click" class="swiper" height="100vh" bgColor='transparent'
				:circular="true">
				<swiper-item v-for="(item, index) in popList" :key="index" class="dis aic jcc" style="flex-wrap: wrap;"
					:disable-touch='popList.length <= 1'>
					<view class="custom-slide">
						<image :src="item.image" mode="widthFix" style="width: 100%;"></image>
						<view class="close">
							<image src="/static/image/close_c.png" mode="widthFix" style="width: 50rpx;" @click="close">
							</image>
						</view>
					</view>

				</swiper-item>
			</swiper>
		</u-overlay>

	</view>
</template>

<script>
	export default {
		props: {
			popList: {
				type: Array,
				default: () => {
					return []
				}
			},
			showPop: {
				type: Boolean,
				default: () => {
					return false
				}
			}


		},
		data() {
			return {
				show: true
			}
		},
		methods: {

			close() {
				this.$emit('close')
			},

		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.centent {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		width: 100vw;
		height: 100vh;

	}

	.custom-slide {
		width: 500rpx;
		max-height: 800rpx;
		padding-bottom: 300rpx;

	}

	.close {
		width: 500rpx;
		height: 50rpx;
		margin: 40rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>